<template>
  <section @click="followGzh" :class="[item.isHiddenGap == 1 ? '' : 'c-mb12', !isSetPageBackground ? 'c-bg-white' : '']" class="c-pv24 c-ph24">
    <div class="c-flex-row c-justfiy-sb c-aligni-center c-pv24 c-ph24 c-br16 c-text-hidden" :class="!isSetPageBackground ? item.backgroundStyleType == 2 ? 'c-bg-sgray' : 'boxShadow' : item.backgroundStyleType == 2 ? 'c-bg-white' : ''">
      <img :src="$addXossFilter(item.items.image, require('@/assets/defult270.png'))" alt="" class="c-ww72 c-hh72 c-brp50" />
      <div class="c-flex-column c-ml20 c-w0 c-flex-grow1 cc-justfiy-center c-pr20">
        <p class="c-fs24 c-text-ellipsis1 c-fw-b" :class="(pageTextColor && isSetPageBackground && item.backgroundStyleType != 2) ? 'pageTextColor' : 'c-fc-xblack'">{{item.title}}</p>
        <p class="c-fs20 c-mt16 c-wb-ba" :class="(pageTextColor && isSetPageBackground && item.backgroundStyleType != 2) ? 'pageTextColor' : 'c-fc-gray'">{{item.desc}}</p>
      </div>
      <div class="c-fs20 c-fc-white c-hh48 c-lh48 c-textAlign-c c-ww132 theme-bg c-br32" :class="isSetPageBackground && item.backgroundStyleType != 2 ? 'c-bd1-white' : ''">立即关注</div>
    </div>
  </section>
</template>
<script>
export default {
  components: {
  },
  props: {
    item: {
      type: Object,
      default: () => {
        return {}
      },
    },
    pageName: {//首页 INDEX 预览页 PREVIEW_INDEX 微页面 MICRO_PAGE
      type: String,
      default: "INDEX"
    },
  },
  data() {
    return {
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      isSetPageBackground: sessionStorage.getItem("isSetPageBackground") || 0,
      pageTextColor: sessionStorage.getItem('pageTextColor') || '',
    };
  },
  methods: {
    followGzh() {
      if (this.pageName == 'PREVIEW_INDEX') {
        return;
      }
      this.$store.commit('updateShowAttentionQr', true);
    },
  },
};
</script>
<style scoped>
.boxShadow {
  box-shadow: 0 0 6px 0 rgba(32,0,0,.06);
}
.c-ww72 {
  width: 1.8rem;
}
</style>